{% load static %}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Azure Python Django Task List</title>
    <link href="{% static "Site.css"%}" rel="stylesheet" type="text/css" />

    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js" ></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"></script>

    <link href="{% static "css/lightbox.css"%}" rel="stylesheet" />
    <script src="{% static "js/lightbox.js"%}"></script>

    <script>
        $(function()
        {
            var tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);
            var dateString =(tomorrow.getMonth()+1) + '/' + tomorrow.getDate() + '/' +
                    tomorrow.getFullYear();
            $("#datepicker").val(dateString);

            $( "#datepicker" ).datepicker();

            $('#create').click(function(e) {
                $('#additemform').submit();
            });

            $('#select-complete').live("change", function () {
                window.location.href = 'markitem.php?pk=' + $(this).val();
            });

            var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

            if (is_chrome)
            {
                $('#uploadbutton').click(function(e) {
                    e.preventDefault();
                    $('#upload').trigger('click');
                });

                $('#upload').live("change", function() {
                    $('#imagename').html(this.value.split('\\').pop())
                });
            }
            else
            {
                $('#upload').css('display','block');
                $('#uploadlabel').css('display','block');
                $('#uploadbutton').css('display', 'none');
            }
        });
    </script>
</head>
<body>
<div class="container">
    <h1>To Do List</h1>
    <div id="main-body">
        <table>
            <thead>
            <tr>
                <th class="name">Name</th>
                <th class="category">Category</th>
                <th class="small">Date</th>
                <th class="collapse">Complete</th>
                <th class="collapse">Attachment</th>
                <th class="collapse">Delete</th>
            </tr>
            </thead>
            <tbody>
            {% for task in tasks %}
            <tr>
                <td>{{ task.Name }}</td>
                <td>{{ task.Category }}</td>
                <td>{{ task.Date }}</td>
                <td>
                    {% if task.Complete %}
                        <a href="/complete/{{ task.RowKey }}/false"><img src="{% static "images/checked.png"%}" alt="complete" title="complete" /></a>
                    {% else %}
                        <a href="/complete/{{ task.RowKey }}/true"><img src="{% static "images/unchecked.png"%}" alt="complete" title="complete" /></a>
                    {% endif %}
                </td>
                <td>
                    {% if task.Image != None %}
                    <a href="{{ attachmentBaseUrl }}{{ task.Image }}" rel="lightbox"><img src="{% static "images/icon-image.png"%}" alt="view image" title="view attachment" /></a>
                    {% endif %}
                </td>
                <td><a href="/delete/{{ task.RowKey }}"><img src="{% static "images/icon-delete.png"%}" alt="delete" title="delete" /></a></td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="widget">
        <form id="additemform" name="additemform" action="/" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="add-container">
                <h2>Add Item</h2>
                <label>Item Name</label>
                <input type="text" name="itemname" />
                <label>Category</label>
                <input type="text" name="category" />
                <label>Date</label>
                <input id="datepicker" name="date" type="text" value="1/16/13" class="small calendar" />
                <label id="uploadlabel" style="display:none;">Attachment</label>
                <input type="file" id="upload" name="upload" style="display:none;" />
                <div class="clear"></div>
                <a href="#" id="uploadbutton" class="upload">Attachment</a><span id="imagename" class="image-name"></span><!---- Just name of image being uploaded goes here ---->
                <a href="#" id="create" class="create">create</a>
            </div>
        </form>
    </div>
    <footer><a href="#" target="_blank">View Project</a>
        <img src="/static/images/lang-python.png" alt="language icon" title="language icon" />
    </footer>
</div>
</body>
</html>